<template>
  <div class="login">
    <img :src="admin_login_background_img" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover;">
    <form class="login-box" @submit.prevent="onsubmit">
      <img
          class="login-box-bg bg1"
          src="@/assets/img/login_box-bg.png"
          alt=""
      />
      <img
          class="login-box-bg bg2"
          src="@/assets/img/login_box-bg.png"
          alt=""
      />
      <img
          class="login-box-bg bg3"
          src="@/assets/img/login_box-bg.png"
          alt=""
      />
      <img
          class="login-box-bg bg4"
          src="@/assets/img/login_box-bg.png"
          alt=""
      />
      <div class="title">用户登录</div>
      <div :class="['user-box', on_input=='name' ? 'box-on' : '']">
        <img src="@/assets/img/user.png" alt=""/>
        <input type="text" v-model.trim="loginFrom.name" placeholder="用户名" @focus="on_input='name'" />
      </div>
      <div :class="['user-box', on_input=='password' ? 'box-on' : '']">
        <img src="@/assets/img/psd.png" alt=""/>
        <input type="password" v-model.trim="loginFrom.password" placeholder="密码" @focus="on_input='password'" />
      </div>
      <input type="submit" class="login-btn" value="登 录">
    </form>
    <div class="copyright">
      Copyright © 2022 TAIYU 版本号：<span>TAIYU-ZSFF-v2.1</span>
    </div>
    <img_code ref="code" v-model="show_img_code" :img_data="img_code_data" @click:point="img_code_click"></img_code>
  </div>
</template>
<script>
import img_code from "@/components/ImgCode.vue";
import {_config, _href, _url_static} from "@/js/s94_tool.js";
import {ajax} from "@/js/api_tool.js";
import {href_handle, msg, toast} from "@/js/tool.js";
import {use_menu_list} from "@/store/menu_list.js";
import {use_config_map, use_this_tenant} from "@/store/config_map.js";
import {use_this_admin} from "@/store/this_admin.js";

export default {
  components: {
    img_code: img_code,
  },
  data(){
    return {
      on_input: '',
      loginFrom: {name: '', password: ''},
      show_img_code: false,
      position: {},
    }
  },
  methods:{
    img_code_data(){
      return new Promise((ok, fail)=>{
        ajax('/home/api/img_code', (res)=>{ ok(res.data);  }, fail)
      })
    },
    img_code_click(points){
      this.position = points[0];
      this.show_img_code = false;
      this.onsubmit();
    },
    login_after(admin){
      let app = this;
      // 刷新菜单
      use_menu_list().refresh();
      // 跳转
      let path = '/index';
      let is_expiration = use_this_tenant().id>0 && use_this_tenant().expiration_status  !== 1;
      if (is_expiration){
        path = '/expire';
      }else {
        let back = document.referrer.replace(/^.+\/sys/, '');
        let ban_path = ['/expire', '/login'];
        if (back.indexOf('/')===0 && !~ban_path.indexOf(back)) path = back;
      }
      href_handle(path, 500);
    },
    onsubmit(){
      let app = this;
      if(!this.position.left) return (this.show_img_code = true);
      ajax({
        url:`/admin/index/login?left=${this.position.left}&top=${this.position.top}`,
        method:'POST',
        data: this.loginFrom,
        loading:true
      }, (res)=>{
        this.login_after(res.data);
      }, (res)=>{
        this.position = {};
        this.$refs['code'].refresh();
        if (res.errors?.left || res.errors?.top){ //验证码错误，直接再次打开验证码
          this.show_img_code = true;
        }
      })
    }
  },
  computed: {
    admin_login_background_img(){
      return _url_static(use_config_map().config.page?.img?.admin_login_background_img || '/init_img/loginbackground.jpg');
    },
  },
  mounted() {
    if (use_this_admin().id > 0){
      toast.ok('已登录，跳转中');
      this.login_after(use_this_admin());
    }
  }
}
</script>
<style scoped>
.login {
  width: 100%;
  color: #fff;
  position: relative;
  height: 100%;
  background: center/cover no-repeat;
}
.login .login-box {
  padding: 40px 0 80px 0;
  width: 420px;
  background: rgba(21, 24, 76, 0.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login-box-bg {
  width: 32px;
  height: 32px;
}
.bg1 {
  transform: rotate(180deg);
  position: absolute;
  top: 0;
}
.bg2 {
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(-90deg);
}
.bg3 {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(90deg);
}
.bg4 {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotate(0deg);
}
.title {
  font-size: 30px;
  text-align: center;
}
.user-box {
  padding: 0 16px;
  margin: 32px auto 0 auto;
  width: 360px;
  height: 46px;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
}
.user-box img {
  width: 20px;
  height: 20px;
  margin-right: 16px;
}
.user-box input {
  border: none;
  background: none;
  height: 100%;
  flex: 1;
  font-size: 16px;
  color: #ccc;
}
.user-box input::-webkit-input-placeholder {
  /* WebKit browsers，webkit内核浏览器 */
  color: #ccc;
}
.user-box input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
}
.user-box input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
}
.user-box input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #ccc;
}
.box-on {
  border: 2px solid #00aeff;
}
.login-btn {
  margin: 30px auto 0 auto;
  width: 360px;
  height: 46px;
  background: linear-gradient(360deg, #278bff 0%, #19b0d6 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
}
.login-btn:active {
  opacity: 0.9;
}

.copyright {
  position: absolute;
  width: 100%;
  bottom: 20px;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
}
.copyright span {
  color: #31d9ff;
}
</style>

